<template>
    <div class="form-container">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
            <el-form-item label="账号" prop="username">
                <el-input autofocus v-model="ruleForm.username" maxlength="18" type="text" autocomplete="on" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" type="password" maxlength="18" show-password autocomplete="on" />
            </el-form-item>
            <el-form-item>
                <div class="btn-container">
                    <el-button type="primary" style="width: 120px">登录</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped lang="scss">
.form-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .el-form {
        padding: 20px;
        border-radius: var(--el-border-radius-base);
        border: var(--el-border);
        position: relative;

        .el-input {
            width: 174px;
        }

        .el-form-item:last-child {
            margin-bottom: 0;
        }

        .btn-container {
            margin: 0 auto;
        }
    }
}


</style>